<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <!-- 
    模板引用ref
      概念：
        一个特殊的ref属性，可以用于标记元素or组件，后续通过api获取到所标记的元素or组件。

        如果标记的是元素，后续获取的就是该元素的DOM对象
        如果标记的是组件，后续获取的就是该组件的实例对象

      语法：

        1. ref值为一个字符串

          标记：    <div ref="abc" ></div>

          获取：    this.$refs.abc

        2. ref值为一个函数

          标记：    <div :ref="(el) => this.abc = el"></div>

          获取：    this.abc

      注意事项：

        获取操作，必须等到当前组件挂载完成之后才可以。

    
    this.$refs 实例属性

        是一个对象，内容是当前组件的所有 ref 属性标记的内容

   -->
    <div id="app">
      <input ref="myInput" type="text" />

      <p ref="myP"></p>

      <div :ref="(el) => this.abc = el">我的天1111</div>


      <!-- 
        组件，接受一个 number，如下代码，1 是字符串，如果期望是一个数字1,则需要使用 v-bind
        <组件 v-bind:number="1"></组件>


       -->
      <!-- <组件 number="1" :a="{ name: '张三' }" :b="[1, 2, 3]" :c="() => {}"></组件> -->

      <button @click="fn1">获取 input 的DOM</button>
    </div>

    <script type="module">
      import { createApp } from "./lib/vue3.esm.browser.js";

      createApp({
        mounted() {
          this.$refs.myP.innerHTML = '我的天'
        },

        methods: {
          fn1() {
            // 获取 input 的DOM
            console.log("this.$refs", this.$refs);
            this.$refs.myInput.focus()

            this.$refs.myP.innerHTML = '我的天'

            this.abc.innerHTML = '哈哈哈哈哈'
          },
        },
      }).mount("#app");
    </script>
  </body>
</html>
